<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/common.css?v=1.0.1" />
    <link rel="stylesheet" href="css/main.css?v=1.0.1" />
    <script src="js/rem.js"></script>
    <script src="js/zepto.js"></script>
    <title>财富中心</title>
</head>

<body>
    <div class="header">
        <img src="img/left-white.png" alt="" />
        <span class="header-title">生活引导</span>
    </div>

    <div class="server-container container navFixed">
        <div class="fixed-con fixed-nav">
            <ul class="nav-list">
                <li class="louceng">全部楼层 <i class="iconfont icon-daosanjiao"></i></li>
                <li class="fenlei">全部分类 <i class="iconfont icon-daosanjiao"></i></li>
                <li class="zimu">A-Z <i class="iconfont icon-daosanjiao"></i></li>
            </ul>
            <ul class="nav-item" style="max-height:100vh;">
                <li>运动健身</li>
                <li>欢乐活动</li>
            </ul>
        </div>
        <div class="grid yindao-con">
            <ul class="row-2 clear v-load">
                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>
                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>
                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>
                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>
                                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>
                                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>
                                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>
                                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="mask"></div>
    <div class="place"></div>
    <div class="tab-bar">
        <a class="tab home" href="">
            <span><img src="img/tab-bar01.png" alt="" /></span> <span>首页</span>
        </a>
        <a class="tab active" href="recommend.html">
            <span><img src="img/tab-bar02-active.png" alt="" /></span>
            <span>推荐</span>
        </a>
        <a class="tab " href="my.html">
            <span><img src="img/tab-bar03.png" alt="" /></span> <span>我的</span>
        </a>
    </div>
</body>

</html>
<script src="js/main.js?v=1.0.0"></script>
<script>
    let flag1 = true
    $('.fenlei,.louceng,.zimu').click(function () {
        if (flag1) {
            $('.nav-item').slideDown()
            $('.mask').show().css('opacity','1')
        } else {
            $('.nav-item').slideUp()
            $('.mask').css('opacity','0')
           setTimeout(function(){
            $('.mask').hide()
        },300)
        }
        flag1 = !flag1
    })
    $('.mask').click(function(){
        $('.nav-item').slideUp()
            $('.mask').css('opacity','0')
           setTimeout(function(){
            $('.mask').hide()
        },300)
        flag1 = !flag1
    })
</script>
<!-- <script>
    let flag = true;
    let mock = null;
    //滚动加载函数
    function loadmore(height = 200, callback) {
        $(window).scroll(function () {
            let scrollTop = $(this).scrollTop();
            let scrollHeight = $(document).height();
            let windowHeight = $(this).height();
            console.log(scrollTop, scrollHeight, windowHeight)
            if (scrollTop + windowHeight + height >= scrollHeight) {
                if (flag) {
                    flag = !flag
                    console.log('开始ajax请求,请求完成变成1')
                    callback()
                }
            }
        });
    }
    // 调用加载
    loadmore(300, ajaxData)
    // 后台接口加载数据函数
    function ajaxData() {
        setTimeout(function () {
            flag = !flag //必备
            console.log('我变成1了');
            $('.v-load').append(mock)
        }, 1000)
    }
    // 模拟数据
    function mockData() {
        mock =
            `
                           <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>                <li>
                    <div class="yindao-logo">
                        <img src="img/food01.jpg" alt="" />
                    </div>
                    <div class="logo-des">
                        <h4>星巴克咖啡 Starbucks</h4>
                        <p><i class="iconfont icon-dibiao"></i> 北京市朝阳三环北路7号</p>
                        <p class="tel"><i class="iconfont icon-phone"></i> 010-6563 4888</p>
                    </div>
                </li>

        `
    }
    mockData()
</script> -->